<template>
  <div class="model-nestview">
    <div class="full-box">
      <div class="map-container">
        <!-- 地图 -->
        <Map @onload="handleMapLoad" :options="mapOptions" />
      </div>
      <mapBaseLayer @handleChangeTree="changeChecked" />
      <div class="page-back-box" @click="goBack"><span class="back-icon"></span> 返回</div>
      <div class="select-box">
        <SchemeSelect
          :placeholder="state.placeholderOne"
          :define-options="state.options"
          :images="'u97.png'"
          @changeSelect="changeSelect"
        />
        <SchemeList
          @clickLi="clickLi"
          :images="'u101.png'"
          :title="'预报断面'"
          :data-list="state.sectionArr"
          :showbtn="false"
        />
      </div>
    </div>
    <!-- 右侧面板 -->
    <component
      ref="rightPanle"
      :is="panelName"
      :modelobj="props.modelobj"
      :defaultselect="defaultselect"
      :ishidden="ishidden"
    ></component>
  </div>
</template>
<script setup>
import { ref, reactive, onActivated, markRaw, onMounted } from 'vue'
import Map from '@/components/app-map/map.vue'
import mapBaseLayer from '@/components/app-map/mapBaseLayer/index.vue'
import emitter from '@/utils/bus'
import SchemeSelect from '@/components/app-publicui/scheme-select.vue'
import SchemeList from '@/components/app-publicui/scheme-list.vue'
import CheckPanel from './cpns/CheckPanel/index.vue'
import CheckSkbyPanel from './cpns/CheckPanel/skby.vue'

import {
  clearLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addJsUnitNoScheme,
  addRainLayer,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  changeJsUnitSecGraphic,
  positionRiver,
  addTileLayer,
  addDynamicLayerShowAll,
  locatePoint,
  addBasinVectorTiles,
  removeBasinVectorTiles,
  multipolygonToLnglats,
  addTopologyPosition,
  addTopologyOne,
  addGeojsontoFly
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  RAIN_LAYER,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_BASE_LAYER_URL,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER,
  YSH_BASE_LAYER_URL,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  UNIT_SEC_LAYER,
  UNIT_COMPUT_LAYER,
  UNIT_PART_LAYER,
  DWH_SDLSEC_LAYER1_URL,
  DWH_SDLSEC1_LAYER,
  YSH_SDLSEC_LAYER1_URL,
  YSH_SDLSEC1_LAYER,
  DWH_SDLSEC2_LAYER,
  DWH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC2_LAYER
} from '@/constants'
import {
  //查看小流域空间坐标
  getWataGeom,
  getSectionUnitGeom,
  getXajUnitGeomList,
  getXajUnitGeom
} from '@/services/modules/map.js'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'
import jsUnitData from '@/assets/data/map_data/js_unit.json'
import topologyData from '@/assets/data/map_data/topology.json'
import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'
import nodeData from '@/assets/data/map_data/node.json'
import sec_info from '@/assets/data/com_data/sec_info.json'
import dwhRain from '@/assets/data/map_data/dwhRain.json'
//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
import yshRain from '@/assets/data/map_data/yshInfo/yshRain.json'
import { getZone, getSectionTree, getResvResvs } from '@/services/modules/model-config'
//主页列表传的参数
const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  }
})
const rightPanle = ref(null)
const state = reactive({
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  sectionArr: [],
  placeholder: '大汶河优选方案',
  placeholderOne: '',
  options: []
})
//控制右侧面板折叠
const ishidden = ref(true)
//secStyle
const secStyle = reactive({
  fill: true,
  fillColor: '#3388ff',
  // fillColor: 'white',
  fillOpacity: 0.3,
  outline: true,
  outlineWidth: 1,
  outlineColor: '#0000FF',
  outlineOpacity: 0.5
})
//新安江style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
// 地图河道小流域
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
})
//地图小流域
const basinLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF',
    opacity: 0
  }
  //水动力
  // ？？？
})
const sdl2UnitStyle = reactive({
  sdl: {
    weight: 1,
    fillOpacity: 0.6,
    color: 'red',
    fill: false
  }
})
const riverLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false,
    opacity: 0
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
//默认选择第一项，改变他的值控制右侧面板内容
let defaultselect = ref({
  title: '',
  id: ''
})
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const zoneId = ref()

//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
//切换zone（大汶河）
const changeSelect = async (v) => {
  zoneId.value = v
  getLeftTree()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER),
    clearLayer(mapInstance, RAIN_LAYER),
    removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  let map = mapInstance
  if (v == 1) {
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加矢量切片数据
    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    addBasinVectorTiles(map, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    // addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  } else if (v == 2) {
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    addBasinVectorTiles(map, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
    //添加矢量切片数据
    addBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
    // addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
    // //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  }
}
const panelName = ref(null)
const getLeftTree = () => {
  if (
    props.modelobj.typeCode == 'W090002' ||
    props.modelobj.typeCode == 'W090001' ||
    props.modelobj.typeCode == 'W090003'
  ) {
    // 查询水库信息
    getResvResvs({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  } else {
    getSectionTree({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  }
}
function initData() {
  return new Promise((resolve, reject) => {
    getZone().then((res) => {
      if (res.code === 200) {
        state.placeholderOne = res.data[0].name
        state.options = res.data
        zoneId.value = res.data[0].id
        getLeftTree()
      }
    })
  })
}
onMounted(async () => {
  console.log(props.modelobj, '面板')
  // 2为新安江
  if (props.modelobj.typeCode == 'W010002' || props.modelobj.typeCode == 'W010004') {
    // 新安江
    panelName.value = markRaw(CheckPanel)
  } else {
    // 时空变源
    panelName.value = markRaw(CheckSkbyPanel)
  }
  // defaultselect.value = state.dataList[0]
  initData()
})
//*************方法***********************//

emitter.on('changeRightPanel', (value) => {
  ishidden.value = value
})
const goBack = () => {
  emitter.emit('goback', true)
}

const clickLi = async (item) => {
  defaultselect.value = item
  rightPanle.value.loadTabsData(item)
  ishidden.value = false
  removeBasinVectorTiles(mapInstance, UNIT_SEC_LAYER)
  removeBasinVectorTiles(mapInstance, UNIT_COMPUT_LAYER)
  // removeBasinVectorTiles(mapInstance,UNIT_PART_LAYER)
  //查询计算单元坐标信息
  getSectionUnitGeom({ blkcd: item.blkcd }).then((res) => {
    if (res.code === 200) {
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, UNIT_SEC_LAYER, secStyle)
      }
    }
  })
  //查询新安江集合
  getXajUnitGeomList({ blkcd: item.blkcd }).then((res) => {
    if (res.code === 200) {
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, UNIT_COMPUT_LAYER, secStyle)
      }
    }
  })
  // changeJsUnitSecGraphic(mapInstance, item.blkcd, JS_UNIT_LAYER)
}
const checkSec = ref(true)
const checkJsUnit = ref(true)
const checkTopology = ref(true)
const checkWata = ref(true)
const checkRiver = ref(true)
const checkNode = ref(true)
const checkRainSite = ref(true)

/**
 * 地图实例
 */
let mapInstance = null
/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = ({ map }) => {
  setTimeout(async () => {
    await PPtnGeomList()
    await SecGeomList()
    await NodeGeomList()
    await TopologyGeomList()
    mapInstance = map
    const layerUrlS = mapUrl
    addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
      12,
      11,
      '流域界'
    )
    //添加矢量切片数据
    addBasinVectorTiles(map, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    // if (props.modelobj.typeCode == 'W040001') {
    //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    // } else if (props.modelobj.typeCode == 'W040002') {
    //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER2_URL, DWH_SDLSEC2_LAYER, sdl2UnitStyle)
    // }

    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  }, 100)
}

const changeChecked = async ({ event, item }) => {
  // removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
  // removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
  //被选中的值
  // await PPtnGeomList()
  // await SecGeomList()
  // await NodeGeomList()
  // await TopologyGeomList()
  console.log(event + ':' + item)
  switch (item) {
    // case 'riverSec':
    //   if (event) {
    //     if (zoneId.value == 1) {
    //       addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    //     } else if (zoneId.value == 2) {
    //       addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
    //     }
    //   } else {
    //     removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
    //     removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
    //   }
    //   break
    // case 'riverGrid':
    //   if (event) {
    //     if (zoneId.value == 1) {
    //       addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER2_URL, DWH_SDLSEC2_LAYER, sdl2UnitStyle)
    //     } else if (zoneId.value == 2) {
    //       addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER2_URL, YSH_SDLSEC2_LAYER, sdl2UnitStyle)
    //     }
    //   } else {
    //     removeBasinVectorTiles(mapInstance, DWH_SDLSEC2_LAYER)
    //     removeBasinVectorTiles(mapInstance, YSH_SDLSEC2_LAYER)
    //   }
    //   break
    case 'sec':
      if (event) {
        if (zoneId.value == 1) {
          // 添加断面
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        } else if (zoneId.value == 2) {
          // 添加断面点
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        }
      } else {
        clearLayer(mapInstance, SEC_LAYER)
        clearLayer(mapInstance, SEC_NAME_LAYER)
      }
      break
    case 'jsUnit':
      if (event) {
        if (zoneId.value == 1) {
          //添加计算单元
          addBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
          // addJsUnit(mapInstance,jsUnitData,JS_UNIT_LAYER)
        } else if (zoneId.value == 2) {
          // // //添加计算单元
          // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
        }
      } else {
        // clearLayer(mapInstance, JS_UNIT_LAYER)
        removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
      } else {
        clearLayer(mapInstance, TOPOLOGY_LAYER)
      }
      break
    case 'river':
      if (event) {
        if (zoneId.value == 1) {
          //添加小流域
          // addWataLayer(mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, riverLayerStyle)
        } else if (zoneId.value == 2) {
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, riverLayerStyle)
        }
        // //添加河道
        // addRiverLayer(mapInstance, riverData, RIVER_LAYER)
      } else {
        if (zoneId.value == 1) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, basinLayerStyle)
        } else if (zoneId.value == 2) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, basinLayerStyle)
        }
      }
      break
    case 'node':
      if (event) {
        if (zoneId.value == 1) {
          //添加节点
          addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
        } else if (zoneId.value == 2) {
          // //添加节点
          addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
        }
      } else {
        clearLayer(mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        if (zoneId.value == 1) {
          //添加雨量站
          addRainLayer(map, state.pptn, RAIN_LAYER)
        } else if (zoneId.value == 2) {
          addRainLayer(map, state.pptn, RAIN_LAYER)
        }
      } else {
        clearLayer(mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
  if (checkWata.value && checkRiver.value) {
    if (zoneId.value == 1) {
      removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
      addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    } else if (zoneId.value == 2) {
      removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
      addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
    }
  }
  if (!checkWata.value && !checkRiver.value) {
    if (zoneId.value == 1) {
      removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
    } else if (zoneId.value == 2) {
      removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
    }
  }
}
</script>
<style lang="less" scoped>
.map-container {
  background-color: #f5f5f5;
}
.legend-box {
  position: absolute;
  bottom: 20px;
  width: 220px;
  height: 170px;
  margin-left: 20px;
  border: #169bd5 2px solid;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  .legend-title {
    display: block;
    margin-left: 30px;
    margin-top: 10px;
    color: #169bd5;
    font-weight: 500;
  }
  .legend-item {
    margin-left: 20px;
    margin-top: 10px;
  }
}
.select-box {
  position: absolute;
  top: 50px;
  left: 20px;
  .header-select {
    width: 200px;
    margin-bottom: 20px;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
